<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <!-- 在双标签中显示数据要通过{{  }}来完成 -->

        <!--要想正常显示vue提供的数据，必须要放在vue对象控制标签里-->

        <h1>{{name}}</h1>

        <p>{{age}}</p>

            <p>{{msg}}</p>
            <p v-text='msg'></p>
            <p v-text='msg'>*******aaaaaa</p>
            <input type="button" :value="msg" :title="msg+'123456'" /><br>
            <input type="button" :value="name" :title="msg+'123456'" @click="show" /><br>

            <!-- 在表单输入框中显示数据要使用v-model来完成，模板语法的时候，我们会详细学习 -->

        <input type="text" v-model="age">{{age%2==0?age:name}}
    </div>

<script>

window.onload = function(){

    // 创建vm对象

    var vm = new Vue({

        el: "#app",

        data: {

            name:"大标题",

            age:11,
            msg:'这是一个msg'

        },
        methods:{
            show:function(){
                alert("who are you?");
            }
        }

    })

}

</script>

</body>

</html>